<template>
	<view class="home">
		<navbar :isback='false' title="达人商单" backgroundColor='rgba(248, 248, 253, 1)'>
			<view slot="left" class="hleft">
				<!-- <image class="gllogo" src="/static/LOGO.png" /> -->
			</view>
		</navbar>
		<!-- #ifdef APP-PLUS -->
		<!-- <view class="immerse"></view> -->
		<!-- #endif -->
		<view class="newcontent">
			<view class="jtime">
				<view class="jitem" :class="index==3?'jactive':''" v-for="(item,index) in 7" :key="index">
					<text class="tshi">一</text>
					<text class="tshitwo">{{ index+1 }}</text>
				</view>
			</view>
			<view class="twoxian"></view>
			<view class="daqie">
				<view class="qieleft">
					<view class="qieitem " :class="head==0?'qieactive':''" @click="headClick(0)" >全部</view>
					<view class="qieitem " :class="head==1?'qieactive':''" @click="headClick(1)" >探店</view>
					<view class="qieitem" :class="head==2?'qieactive':''" @click="headClick(2)">云剪</view>
					<view class="qieitem" :class="head==3?'qieactive':''" @click="headClick(3)">直播</view>
				</view>
				<view class="qieright ml">
					<view class="tixing" v-if="istixing">
						<image class="tis" src="/static/new/tis.png" />
						<view class="tisview">
							提醒
						</view>
					</view>
					<view class="tixing" v-if="!istixing">
						<image class="tis" src="/static/new/ti.png" />
						<view class="tisview mian">
							免扰
						</view>
					</view>
				</view>
			</view>
			<BaoMing v-if="isxin" :baotitle="baotitle" :baisub="baisub" :btntitle="btntitle" :btnmiao="btnmiao" lei="jing"></BaoMing>

			<view class="jlist">
				<view class="lieitem" v-for="(item,index) in 10" :key="index">
					<view class="lieone">
						<image class="honeicon" src="/static/new/hone.png" />
						<view class="gdview">
							<view class="gdname">
								<text class="gname txt">金豪美发</text>
								<text class="gntime">5分钟前</text>
							</view>
							<text class="tiname txt">实探宝子们快来报名啦</text>
						</view>
						<view class="genjin">跟进</view>
					</view>
					<view class="lietwo">
						<view class="bqview">
							<text class="qianone che">车</text>
							<text class="qiannum">1000元</text>
						</view>
						<view class="bqview">
							<text class="qianone">佣</text>
							<text class="qiannum">20%</text>
						</view>
						<view class="bqview">
							<text class="qiannum">含餐</text>
						</view>
						<view class="bqview">
							<text class="qiannum">含住</text>
						</view>
					</view>
					<view class="liethree">
						<view class="lxuan" :class="nid==item.id?'lactiveone':nid>item.id?'lactive':''" v-for="(item,index) in btns" :key="index">
							{{item.name}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<Tabbar :tabIndex="2"></Tabbar>
</view>
</template>
<script>
import BaoMing from '@/components/BaoMing/BaoMing'
export default {
	components:{
		BaoMing
	},
	data() {
		return {
			bgcolor:'#fff',
			head:0,
			btns:[
				{id:1,name:'反选',istrue:true},
				{id:2,name:'实拍',istrue:true},
				{id:3,name:'短片',istrue:false},
				{id:4,name:'正片',istrue:false},
				{id:5,name:'审片',istrue:false},
				{id:6,name:'发布',istrue:false},
				{id:7,name:'结款',istrue:false},
			],
			nid:4,
			istixing:true,
			isxin:false,
			baotitle:'报名参与商单',
			baisub:'立即报名参与商单活动',
			btntitle:'立即报名',
			btnmiao:'优质商单接不停'
		}
	},
	components: {
	},
	computed: {
	},

	mounted() {
		
	},
	created(){
		uni.hideTabBar()
	},
	async onLoad() {
	},
	beforeCreate(){
		uni.hideTabBar()
	},
	async onShow() {
		
	},
	onReachBottom: function () {
	},
	methods: {
		headClick(e){
			this.head = e
		}
	}
}
</script>

<style lang="scss" scoped>
.newcontent{
	min-height: 100vh;
	background-color:  #f8f8fd;
	// padding-bottom: 100px;
	padding: 0 20px 100px;
	.twoxian{
		border: 1px dashed rgba(232, 232, 232, 1);
		display: block;
		margin: 20px 0 15px;
	}
	.jtime{
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
	.jitem{
		width: 40px;
		height: 60px;
		opacity: 1;
		border-radius: 6px;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background: rgba(255, 255, 255, 1);
		box-shadow: 1px 3px 0px  rgba(119, 102, 231, 0.08);
		.tshi{
			font-size: 14px;
			font-weight: 400;
			color: rgba(153, 153, 153, 1);
		}
		.tshitwo{
			font-size: 16px;
			font-weight: 700;
			color: rgba(102, 102, 102, 1);
		}
	}
	.jactive{
		box-shadow: 1px 3px 0px  rgba(119, 102, 231, 1);
		
	}


	.daqie{
		display: flex;
		flex-direction: row;
		// margin: 15px 20px 16px;

		.qieleft{
			display: flex;
			flex-direction: row;
			align-items: center;
			.qieitem{
				font-size: 20px;
				font-weight: 400;
				margin-right: 20px;
				display: inline-block;
				color: rgba(153, 153, 153, 1);
			}
			.qieactive{
				color: rgba(51, 51, 51, 1);
			}
		}
		.qieright{
			display: flex;
			flex-direction: row;
			align-items: end;
			padding-bottom: 5rpx;
			margin-left: auto;
			.tixing{
				width: 60px;
				height: 24px;
				position: relative;
				.tis{
					width: 100%;
					position: absolute;
					height: 100%;

				}
				.tisview{
					position: relative;
					display: flex;
					width: 100%;
					height: 100%;
					align-items: center;
					justify-content: center;
					font-size: 12px;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					padding-right: 15px;
				}
				.mian{
					color: rgba(119, 102, 231, 1);
				}
			}
			.mzuiai{
				font-size: 12px;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);
			}
			.aishu{
				height: 15px;
				width: 1px;
				display: inline-block;
				margin-left: 10px;
				margin-right: 10px;
				background-color: rgba(232, 232, 252, 1);
			}
			.shainame{
				font-size: 12px;
				font-weight: 400;
				color: rgba(153, 153, 153, 1);

			}
			.shaiicon{
				width: 18px;
				height: 18px;
			}
		}
	}
	.jlist{
		width: 100%;
		display: flex;
		flex-direction: column;
		margin-top: 16px;
		.lieitem{
			border-radius: 12px;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0px 6px 10px  rgba(119, 102, 231, 0.08);
			margin-bottom: 20px;
			padding: 20px;
			.lieone{
				display: flex;
				flex-direction: row;
				align-items: center;
				border-bottom: 1px dashed rgba(232, 232, 232, 1);
				padding-bottom: 10px;
				.honeicon{
					width: 36px;
					height: 36px;
					margin-right: 10px;
				}
				.gdview{
					width: 60%;
					display: flex;
					flex-direction: column;
					.gdname{
						display: flex;
						flex-direction: row;
						align-items: center;
						.gname{
							font-size: 12px;
							font-weight: 700;
							color: rgba(51, 51, 51, 1);
							max-width: 80%;

						}
						.gntime{
							font-size: 10px;
							font-weight: 400;
							color: rgba(153, 153, 153, 1);
							display: inline-block;
							margin-left: 10px;
						}
					}
					.tiname{
						font-size: 12px;
						font-weight: 400;
						color: rgba(102, 102, 102, 1);
						display: block;
						margin-top: 3px;
					}
				}
				.genjin{
					margin-left: auto;
					width: 60px;
					height: 36px;
					opacity: 1;
					border-radius: 6px;
					background: rgba(119, 102, 231, 1);
					box-shadow: 0px 0px 3px  rgba(119, 102, 231, 0.63);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 14px;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
				}
			}

			
		}
		.lietwo{
			display: flex;
			flex-direction: row;
			margin-top: 10px;
			.bqview{
				margin-right: 13px;
				display: flex;
				flex-direction: row;
				align-items: center;
				.qianone{
					background: rgba(119, 102, 231, 1);
					padding: 3px 6px;
					font-size: 12px;
					font-weight: 400;
					color: rgba(255, 255, 255, 1);
					display: flex;
					align-items: center;
					justify-content: center;
					border-radius: 3px 0px 0px 3px;

				}
				.che{
					border-radius: 12px 0px 0px 3px;
				}
				.qiannum{
					display: inline-block;
					padding: 3px 8px;
					border-radius: 0px 3px 3px 0px;
					background: rgba(248, 248, 253, 1);
					font-size: 12px;
					font-weight: 400;
					color: rgba(102, 102, 102, 1);
				}
			}
		}

		.liethree{
			margin-top: 10px;
			width: 100%;
			border-radius:0 12px 12px 12px;
			height: 36px;
			position: relative;
			display: flex;
			flex-direction: row;
			
			border: 1px solid rgba(220, 214, 255, 1);
			.lxuan{
				flex: 1;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 12px;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				// border-radius: 12px;
			}
			.lxuan:first-child{
				border-radius: 0 0 0 12px;
			}
			.lactive{
				background: rgba(119, 102, 231, 1);
				color: rgba(220, 214, 255, 1);
			}
			.lactiveone{
				background: rgba(119, 102, 231, 1);
				color: #fff;
				font-weight: bold;
				border-radius: 0px 50px 50px 0px !important;
			}
			
		}
		// .lactive :last-child{
		// 	border-radius: 3px 50px 50px 12px !important;
		// }
	}
}	
</style>
